<template>
  <section class="container">
    <!-- 标题 -->
    <h2 class="air-title">
      <i class="iconfont iconfeiji"></i>
      国内机票
    </h2>
    <!-- 搜索广告栏 -->
    <el-row type="flex" justify="space-between">
      <!-- 搜索表单 -->
      <div class="search-form">
        <!-- 搜索组件 -->
        <SearchForm />
      </div>
      <!-- banner广告 -->
      <div class="sale-banner">
        <img src="http://157.122.54.189:9093/images/pic_sale.jpeg" alt />
      </div>
    </el-row>

    <!-- 广告 -->
    <el-row type="flex" class="statement">
      <el-col :span="8">
        <i
          class="iconfont iconweibiaoti-_huabanfuben"
          style="color: #409eff"
        ></i>
        <span>100%航协认证</span>
      </el-col>
      <el-col :span="8">
        <i class="iconfont iconbaozheng" style="color: green"></i>
        <span>出行保证</span>
      </el-col>
      <el-col :span="8">
        <i class="iconfont icondianhua" style="color: #409eff"></i>
        <span>7x24小时服务</span>
      </el-col>
    </el-row>
    <!-- 特价机票 -->
    <h2 class="air-sale-title">
      <i class="iconfont icontejiajipiao"></i>
      特价机票
    </h2>
    <div class="air-sale">
      <el-row type="flex" justify="space-between">
        <el-col
          :span="6"
          class="air-sale-pic"
          v-for="(item, index) in sales"
          :key="index"
        >
          <nuxt-link
            :to="`/air/flights?departCity=${item.departCity}&departCode=${item.departCode}&destCity=${item.destCity}&destCode=${item.destCode}&departDate=${item.departDate}`"
          >
            <img :src="$axios.defaults.baseURL + item.cover" alt />
            <el-row type="flex" justify="space-between" class="layer-bar">
              <span> {{ item.departCity }}--{{ item.destCity }} </span>
              <span> ￥{{ item.price }} </span>
            </el-row>
          </nuxt-link>
        </el-col>
      </el-row>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      sales: [],
    };
  },
  mounted() {
    // 获取特价机票
    // JiPiao - 推荐机票  http:127.0.0.1:1337/airs/sale
    this.$axios({
      url: "/airs/sale",
    }).then((res) => {
      // console.log(res);
      this.sales = res.data.data;
    });
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 0 auto;
  .air-title {
    font-weight: 500;
    color: orange;
    margin: 15px 0;
    i {
      font-size: 22px;
    }
  }
  .el-row {
    .search-form {
      border: 1px solid #ddd;
      border-top: none;
      width: 360px;
      height: 350px;
      box-sizing: border-box;
    }
  }
  .statement {
    margin: 15px 0;
    border: 1px #ddd solid;
    background: #f5f5f5;
    height: 58px;
    padding: 10px 0;
    box-sizing: border-box;
    > div {
      text-align: center;
      line-height: 38px;
      border-right: 1px #ddd solid;

      &:last-child {
        border-right: none;
      }

      * {
        vertical-align: middle;
      }

      i {
        font-size: 30px;
      }
    }
  }
  .air-sale-title {
    font-weight: 500;
    color: rgb(0, 225, 255);
    margin: 15px 0;
    i {
      font-size: 22px;
    }
  }
  .air-sale {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 50px;
    .air-sale-pic {
      width: 225px;
      height: 140px;
      position: relative;
      overflow: hidden;
      a {
        text-decoration: none;
        color: #fff;
        .layer-bar {
          position: absolute;
          bottom: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.5);
          color: #fff;
          height: 30px;
          line-height: 30px;
          width: 100%;
          box-sizing: border-box;
          padding: 0 15px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>